<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/login-register.css" />
		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<script type="text/javascript" src="js/getPath.js" ></script>
	</head>
	<style>
		body {overflow-x:hidden;}
		.popover.right > .arrow:after {
		    border-right-color: #FDF8E4;
		}
		.popover{
			background-color: #FDF8E4;
			color: #927646;
		}
		
	</style>
	<body>

		<div class="navbar navbar-duomi navbar-static-top" role="navigation">
			<div class="navbar-header" style="height: 50px;background-color: black;width: 1366px;">
					<div class="row">
						<div class="col-sm-4" style="margin-left: 1000px;">
							<a class="btn big-login" data-toggle="modal" href="#loginModal">登录</a>
							<a class="btn big-register" data-toggle="modal" href="#registerModal">注册</a>
						</div>
					</div>
			</div>
		</div>

		<div class="container">
			<!-- 
				这是用户登录的界面
			-->
			<div class="modal fade login" id="loginModal">
				<div class="modal-dialog login animated">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title">登录</h4>
						</div>
						<div class="modal-body">
							<div class="box">
								<div class="content">
									<div class="form-group input-group">
										<span class="input-group-addon">
											<i class="glyphicon glyphicon-phone"></i>
										</span>  
										<div data-container="body" data-content="" id="login-message">
										</div>
					                	<input class="form-control" type="text" placeholder="手机号码" name="loginPhone">  
									</div>
									<div class="form-group input-group">
										<span class="input-group-addon">
											<i class="glyphicon glyphicon-lock"></i>
										</span>  
					                	<input class="form-control" type="password" placeholder="密码" name="loginPassword">  
									</div>
									<div class="form loginBox">
										<div style="text-align: right;padding-top: 10px;"><input type="checkbox" />&nbsp;&nbsp;&nbsp;记住密码 </div>
										<input class="btn btn-default btn-login" type="button" value="登录" id="login" >
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 
				这是用户注册的界面
			-->
			<div class="modal fade login" id="registerModal">
				<div class="modal-dialog login animated">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title">注册</h4>
						</div>
						<div class="modal-body">
							<div class="box">
								<div class="form-group input-group">
									<span class="input-group-addon">
										<i class="glyphicon glyphicon-user"></i>
									</span>  
				                	<input class="form-control" type="text" placeholder="名字" name="userName">  
								</div>
								<div class="form-group input-group">
									<span class="input-group-addon">
										<i class="glyphicon glyphicon-phone"></i>
									</span>  
									<div data-container="body" data-content="" id="register-message">
									</div>
				                	<input class="form-control" type="text" placeholder="手机号码" name="userPhone">  
								</div>
								<div class="form-group input-group">
									<span class="input-group-addon">
										<i class="glyphicon glyphicon-lock"></i>
									</span>  
				                	<input class="form-control" type="password" placeholder="密码" name="userPassword">  
								</div>
								<div class="form loginBox">
									<input class="btn btn-default btn-login" style="background-color: #5CB85C;" id="register" type="button" value="注册" disabled>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style="position: absolute; top: 45px;">
			<img src="img/9.jpg" />
		</div>
	</body>
	<script>
		$(function () { 
			
			/**
			 * 用户登录
			 */
			$('#login').bind('click',function(){
				console.log($('input[name="logonPassword"]').val());
				$.ajax({
					type:'post',
					url: getPath() + '/user',
					data:({
						'method':'login',
						'userPassword':$('input[name="loginPassword"]').val(),
						'userPhone':$('input[name="loginPhone"]').val(),
					}),
					dataType:'json',
					success:function(data){
						if('success' == data.result){
							window.location.href= getPath() + "/fram/layout.html";			
						}else{
							$('#login-message').attr('data-content',data.message);
							$('#login-message').popover('show');
							popHide('login-message');
						}
					}
				});
			});
			
			/**
			 * 注册用户提交
			 */
			$('#register').bind('click',function(){
				console.log(123);
				$.ajax({
					type:'post',
					url: getPath() + '/user',
					data:({
						'method':'register',
						'userName':$('input[name="userName"]').val(),
						'userPassword':$('input[name="userPassword"]').val(),
						'userPhone':$('input[name="userPhone"]').val(),
					}),
					dataType:'json',
					success:function(data){
						if('success' == data.result){
							window.location.href= getPath() + "/login.html";			
						}else{
							$('#register-message').css('data-content',data.message);
						}
					}
				});
			});
			
			/**
			 * 校验用户手机号码是否重复（注册按钮改成可用）
			 */
			$('input[name="userPhone"]').bind('focusout',function(){
				$.ajax({
					type:'post',
					url: getPath() + '/user',
					data:({
						'method':'registerGudge',
						'userPhone':$(this).val(),
					}),
					dataType:'json',
					success:function(data){
						if('success' == data.result){
							$('#register-message + input').bind('keyup',function(){
								$('#register').removeAttr('disabled');
							});
						}else{
							$('#register-message').attr('data-content',data.message);
							$('#register-message').popover('show');
							popHide('register-message');
						}
					}
				});
			});
		});
		
		function popHide(object){
			setTimeout(function(){
				$('#'+object).popover('hide');
			},1500);
		}
	</script>
</html>